<template>
  <div id="app">
    用户名：<input type="text" v-model="user.username" /> 
    密码：<input type="text" v-model="user.password" />

    <div v-if=" count>3">
      <tr>
        <td>验证码</td>
        <td class="inputs">
          <input name="checkCode" type="text" id="checkCode" />
          <img id="checkCodeImg" src="./assets/logo.png" />
          <a href="#" id="changeImg">看不清？</a>
        </td>
      </tr>
    </div>
    <button @click="login(user)">登录 {{ count }}</button>
<hr>
欢迎你： {{ user.username }}
    <router-view></router-view>
  </div>
</template>

<script>
// import store from './store';
export default {
  name: "App",
  mounted() {
    console.log(this.$route);
  },
  data() {
    return {
      num: 0,
      name: "",
      count: 0,
      user: {
        username: "",
        password: "",
      },
      
    };
  },

  methods: {
    to() {
      this.$router.go(this.num);
    },
    forward() {
      this.$router.forward();
    },
    back() {
      this.$router.back();
    },
    login(user) {
      this.count++,

      this.$store.commit('payCar/addUS',user.username)

        this.$router.push({
          name: "manList",
          query: user,

        });
    },
  },
  // components:{formUse}
};
</script>

<style>
.man-list {
  border: red 2px solid;
  margin: 20px;
}
#app {
  padding: 20px;
}
#app > a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 120px;
  border: #000 1px solid;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.active {
  color: blue;
  border: 1px solid blue;
}
</style>
